
import Grid from "@material-ui/core/Grid/Grid";
import IconButton from "@material-ui/core/IconButton/IconButton";
import Input from "@material-ui/core/Input/Input";
import SearchSharp from "@material-ui/icons/SearchSharp";
import * as React from "react";
import {Component} from "react";

export class SearchBar extends Component<any> {

    public input = {};

    public inputRef = (node: any) => {
        Object.assign(this.input, {node});
    };

    public render() {
        const {searchClick,children} = this.props;
        return <Grid className={"flex-center padding-normal rect-border-radius"}>
            {children}
            <Input inputRef={
                this.inputRef
            } type={"number"} className={"flex-main"} defaultValue={""}/>
            <IconButton color="secondary" aria-label="Add an alarm" onClick={searchClick.bind(this, this.input)}>
                <SearchSharp>11</SearchSharp>
            </IconButton>
        </Grid>
    }
}

export default SearchBar;
